<template>
  <div id="app">
    <div style="width: 84%;margin: auto">
      <p class="p1">您的手机号：{{tel}}</p>
      <p class="p2">将会收到一条带有验证码的短信，请输入验证码</p>
			<div class="code-input">
         <input type="number" pattern="\d*" placeholder="请输入验证码" class="input1"  maxlength="11" v-model="code">
				 <div class="hquyanzhengm" v-if="bol">重新发送({{t}}s)</div>
				 <div class="hquyanzhengm hquyanzhengmactive" @click="sendcode()" v-else>发送验证码</div>
			</div>
      <mt-button type="primary" class="btn111" @click="next()">绑定</mt-button>
    </div>
  </div>
</template>

<script>
    export default {
        name: "Code",
      data(){
          return{
            tel:'',
            code:'',
						phone:'',
						oldcode:'',
						t:59,
						bol:'',
						phone:'',
          }
      },
      methods:{
				// 点击发送验证码
				sendcode(){
					var that = this;
					that.axios.get(that.$store.state.url + "sms/getSmsCode",{
						params:{
							tel:that.phone,
						}
					}).then(res=>{
					  if (res.data.errcode == 0||res.data.errcode == '0'){
					    // console.log(res.data)
					    that.$toast({
					      message:res.data.msg,
					      position:'center'
					    });
							var time = 59;
							var timer = setInterval(function () {
							  time--;
							  that.t = time;
								that.bol = true;
							  sessionStorage.setItem('timeall',that.t);
							  if (time <= 0) {
							    clearInterval(timer);
							    that.bol = false;
							  }
							}, 1000)
							
					  }else {
					    that.$toast({
					      message:res.data.msg,
					      position:'center'
					    });
					  }
					})
				},
        next(){
					if(this.code==''){
						this.$toast({
							message: '请输入验证码',
							position: 'center'
						});
					}else{
						var data={
							oldcode:this.oldcode,
							code:this.code,
							tel:this.phone
						}
						this.axios.post(this.$store.state.url + "User/changePhone",data).then(res=>{
								this.$toast({
									message:res.data.msg,
									position:'bottom'
								});
							  if (res.data.errcode == 0||res.data.errcode == '0'){
									var that = this;
									setTimeout(function(){
										that.$router.push({
										  path:'/',
										})
									},1000)
									
								}
						})
					}
        }
      },
			destoryed(){
				sessionStorage.removeItem('iscode');
				sessionStorage.removeItem('timeall');
			},
			
      mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
        // console.log(this.$route.query.t);
				var that = this;
        var tel = that.$route.query.t;
        var oldcode = that.$route.query.oldcode;
        var tel1 = tel.substr(0,3) + "****" + tel.substr(7)
				that.phone = tel;
        that.tel = tel1;
				that.phone = tel;
				that.oldcode=oldcode;
				if(sessionStorage.getItem('iscode')){
				  var iscode = sessionStorage.getItem('iscode');
					// console.log(iscode)
					if(iscode==1||iscode=='1'){
					  sessionStorage.setItem('iscode',0)
						var time = 59;
						var timer = setInterval(function () {
						  time--;
						  that.t = time;
							that.bol = true;
						  sessionStorage.setItem('timeall',that.t);
						  if (time <= 0) {
						    clearInterval(timer);
						    that.bol = false;
						  }
						}, 1000)
					}else{
						// console.log(888)
						if(sessionStorage.getItem('timeall')){
							var timeall = sessionStorage.getItem('timeall');
							if(timeall>0){
								that.bol = true;
								that.t = timeall;
								var timer = setInterval(function () {
								  timeall--;
								  that.t = timeall;
									that.bol = true;
								  sessionStorage.setItem('timeall',that.t);
								  if (timeall <= 0) {
								    clearInterval(timer);
								    that.bol = false;
								  }
								}, 1000)
							}
						}else{
						  that.bol = false;
						}
					}
				}else{
					if(that.t<=0){
						that.bol = true;
						// that.t =
					}else{
					  that.bol = false;
					}
				}
				
      }
    }
</script>

<style scoped>
	/* #app{
		font-size: .2rem;
	} */
  .p1{
    font-size:0.24rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    margin-top: 1rem;
  }
  .p2{
    font-size:0.24rem;
    font-weight:500;
    color:rgba(153,153,153,1);
    margin-top: 0.2rem;
  }
	.code-input{
		display: flex;
		justify-content: space-between;
    margin-top: 1rem;
    border-bottom: 0.01rem solid rgba(237,237,237,1);
	}
  .input1{
    width: 3rem;
    height: 0.7rem;
		font-size: 0.3rem;
		margin-top: .2rem;
  }
	.hquyanzhengm{
		height: .76rem;
		padding: 0 .46rem;
		line-height: .76rem;
		text-align: center;
		background: #EDEDED;
		border: 1px solid #EDEDED;
		color: #999999;
		font-size: .3rem;
		border-radius: .38rem;
	}
	.hquyanzhengm.hquyanzhengmactive{
		color: #0287FF !important;
		background: #fff !important;
		border: 1px solid #0287FF !important;
	}
  .input1::placeholder{
    font-size:0.3rem;
    font-family:PingFang-SC-Medium;
    font-weight:500;
    color:rgba(153,153,153,1);
  }
  input:focus::placeholder{
    color: transparent;
  }
  .btn111{
    width: 100%;
    height: 0.88rem;
    margin-top: 0.93rem;
    border-radius:0.44rem;
    font-size: 0.3rem;
    background:rgba(2,135,255,1);
  }
</style>
